import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:xin_he/page/mine/xin_he_mine_team/xin_he_team_extend_item_entity.dart';

import '../../../utils/xh_styles.dart';
import '../../../utils/xin_he_image.dart';
import 'xin_he_mine_team_logic.dart';

class XinHeMineTeamPage extends StatelessWidget {
  XinHeMineTeamPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeMineTeamLogic());
  final state = Get.find<XinHeMineTeamLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
      appBar: AppBar(
        leading: IconButton(
            onPressed: (){
              Get.back();
            },
            icon: Container(
              padding: const EdgeInsets.only(left: 7),
              alignment: Alignment.centerLeft,
              child: const XinHeAssetImage(
                'assets/images/home/app_back_3.png',
                width: 9.5,
                height: 17,
                fit: BoxFit.cover,),
            )
        ),
        backgroundColor: Colors.white,
        shadowColor: Colors.transparent,
        title: Text('我的团队',style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
        centerTitle: true,
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 15,),
          ///我的消费金红包
          Stack(children: [
            Positioned(
                left: 15,
                top: 0,
                child: XinHeAssetImage('assets/images/mine/my_team_bg.png',width: Get.width-30,height: (Get.width-30)*128/345,)),
            Container(
              margin: const EdgeInsets.symmetric(horizontal: 15),
              padding: const EdgeInsets.symmetric(horizontal: 15),
              height: (Get.width-30)*128/345,
              // color: Colors.red,
              child: Row(children: [
                ///左边
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: [
                    const SizedBox(height: 10,),
                    Row(children: [
                      Column(children: [
                        Text('总业绩',style: TextStyle(color: XinHeColor('#FEFEFE'),fontSize: 11,fontWeight: FontWeight.w500),),
                        const SizedBox(height: 10,),
                        Text(state.totalPerformance.value,style: TextStyle(color: XinHeColor('#FEFEFE'),fontSize: 17,fontWeight: FontWeight.w500),),
                      ],),
                      const SizedBox(width: 30,),
                      Column(children: [
                        Text('总人数',style: TextStyle(color: XinHeColor('#FEFEFE'),fontSize: 11,fontWeight: FontWeight.w500),),
                        const SizedBox(height: 10,),
                        Text('${state.totalPeople.value}',style: TextStyle(color: XinHeColor('#FEFEFE'),fontSize: 17,fontWeight: FontWeight.w500),),
                      ],),

                    ],),
                    const Spacer(),
                    RichText(text: TextSpan(children: [
                      TextSpan(text: '我的业绩来自推荐好友认养，释放云茶籽所得',style: TextStyle(color: XinHeColor('#C6F4F4'),fontSize: 12,fontWeight: FontWeight.w500),),

                    ]),),
                    const SizedBox(height: 15,),

                  ],),

              ],),
            ),
          ],),
          const SizedBox(height: 20,),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                GestureDetector(
                  onTap:(){
                    logic.changeTabIndex(0);
                  },
                  child: Container(
                    height: 32,
                    width: 124,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color:  XinHeColor('#30E9E9'),borderRadius: BorderRadius.circular(16)),
                    child: Text('直推成员(${logic.derictDataList.length})',style: TextStyle(color: Colors.white,fontSize:13,fontWeight: FontWeight.w500 ),),
                  ),
                ),
                GestureDetector(
                  onTap: (){
                    logic.changeTabIndex(1);
                  },
                  child: Container(
                    height: 32,
                    width: 124,
                    alignment: Alignment.center,
                    decoration: BoxDecoration(color: XinHeColor('#EBEBEB'),borderRadius: BorderRadius.circular(16)),
                    child: Text('间推成员(${logic.notDerictdataList.length})',style: TextStyle(color: XinHeColor('#333333'),fontSize:13,fontWeight: FontWeight.w500 ),),
                  ),
                ),


              ],),
          ),
          const SizedBox(height: 10,),
          Expanded(child: ListView.separated(
            itemCount: logic.currentList.length,
            clipBehavior: Clip.hardEdge,
            itemBuilder: (ctx,index){
              XinHeTeamExtendItemEntity model = logic.currentList[index];
              return _itemView(model);
            }, separatorBuilder: (BuildContext context, int index) { return SizedBox(height: 0,); },))
        ],),
    ));
  }
  Widget _itemView(XinHeTeamExtendItemEntity model){
    return Stack(children: [
      Container(
        margin: const EdgeInsets.symmetric(horizontal: 15),
        height: 66,
        padding: const EdgeInsets.symmetric(horizontal: 15),
        decoration: BoxDecoration(color: Colors.white,borderRadius: BorderRadius.circular(0)),
        child: Row(children: [
          XinHeNetImage(url:model.iconPath??'',width: 35,height: 35,),
          const SizedBox(width: 10),
          Text('${model.name}',style: TextStyle(color: XinHeColor('#333333'),fontSize: 13,fontWeight: FontWeight.w500),),

          const Spacer(),
          Text('${model.createTime}',style: TextStyle(color: XinHeColor('#999999'),fontSize: 14,fontWeight: FontWeight.w500),),
        ],),
      ),
      Positioned(
        bottom: 0.5,
          left: 15,
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 15),
            width: Get.width-60,height: 0.5,color: XinHeStyle.lineColor,))
    ],);
  }
}
